<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1"><!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>31.用BootStrap重写商城首页</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet"><!-- 引入Bootstrap核心样式文件 -->
    <script src="../js/jquery-1.11.0.min.js"></script><!-- 引入jQuery核心js文件 -->
    <script src="../js/bootstrap.min.js"></script><!-- 引入BootStrap核心js文件 -->
</head>
<body>
<!--logo部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4"><!--大屏,中屏,小屏=4-->
            <img src="../img/logo2.png">
        </div>
        <div class="col-lg-5 col-md-5 col-sm-5 hidden-xs"><!-- .hidden-xs最小的时候隐藏 -->
            <img src="../img/header.png">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3">
            <ol class="list-inline">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">购物车</a>
            </ol>
        </div>
    </div>
</div>

<!--导航栏-->
<div class="container-fluid" style="margin-top: 10px">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">首页</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">鞋靴箱包</a></li>
                    <li><a href="#">电脑办公</a></li>
                    <li><a href="#">孕婴保健</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">所有分类 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">手机数码</a></li>
                            <li><a href="#">家用电器</a></li>
                            <li><a href="#">鞋靴箱包</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">电脑办公</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">孕婴保健</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入搜索内容">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>

<!--轮播图-->
<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="../img/1.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="../img/2.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="../img/3.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<!--热门商品-->
<div class="container-fluid" style="margin-top: 10px">
    <div>
        <span>
            <font size="6">热门商品</font><img src="../img/title2.jpg">
        </span>
    </div>
    <div class="row">
        <!--左边-->
        <div class="col-lg-2 col-md-2 hidden-sm hidden-xs"><!--大&中屏幕占2,手机&平板隐藏-->
            <img src="../img/big01.jpg">
        </div>
        <!--右边-->
        <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12"><!--大&中屏幕占10,手机&平板占满-->
            <!--右上-->
            <div class="row">
                <div class="col-lg-6 col-md-6 hidden-sm hidden-xs"><!--大&中屏幕占6,手机&平板隐藏-->
                    <img src="../img/middle01.jpg">
                </div>
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4" align="center"><!--大&中屏幕占2,手机&平板占4-->
                    <img src="../img/small03.jpg">
                    <p><font color="gray">电炖锅</font></p>
                    <p><font color="red">¥299.00</font></p>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4" align="center"><!--大&中屏幕占2,手机&平板占4-->
                    <img src="../img/small04.jpg">
                    <p><font color="gray">电炖锅</font></p>
                    <p><font color="red">¥299.00</font></p>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4" align="center"><!--大&中屏幕占2,手机&平板占4-->
                    <img src="../img/small05.jpg">
                    <p><font color="gray">电炖锅</font></p>
                    <p><font color="red">¥299.00</font></p>
                </div>
            </div>
            <!--右下-->
            <div>
                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><!--大&中屏占2,平板占3,手机占4-->
                    <img src="../img/small03.jpg">
                    <p><font color="gray">电炖锅</font></p>
                    <p><font color="red">¥299.00</font></p>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><!--大&中屏占2,平板占3,手机占4-->
                    <img src="../img/small04.jpg">
                    <p><font color="gray">电炖锅</font></p>
                    <p><font color="red">¥299.00</font></p>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><!--大&中屏占2,平板占3,手机占4-->
                    <img src="../img/small05.jpg">
                    <p><font color="gray">电炖锅</font></p>
                    <p><font color="red">¥299.00</font></p>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><!--大&中屏占2,平板占3,手机占4-->
                    <img src="../img/small03.jpg">
                    <p><font color="gray">电炖锅</font></p>
                    <p><font color="red">¥299.00</font></p>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><!--大&中屏占2,平板占3,手机占4-->
                    <img src="../img/small04.jpg">
                    <p><font color="gray">电炖锅</font></p>
                    <p><font color="red">¥299.00</font></p>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" align="center"><!--大&中屏占2,平板占3,手机占4-->
                    <img src="../img/small05.jpg">
                    <p><font color="gray">电炖锅</font></p>
                    <p><font color="red">¥299.00</font></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!--广告图片-->
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 hidden-sm hidden-xs"><!--大&中屏显示图片,平板&手机隐藏图片-->
            <img src="../img/ad.jpg" width="100%" style="margin-top: 10px">
        </div>
    </div>
</div>

<!--友情链接,版权信息-->
<div class="container-fluid">
    <div class="row" align="center">
        <ul class="list-inline">
            <li><a href="">关于我们</a></li>
            <li><a href="">联系我们</a></li>
            <li><a href="">招贤纳士</a></li>
            <li><a href="">法律声明</a></li>
            <li><a href="">友情链接</a></li>
            <li><a href="">支付方式</a></li>
            <li><a href="">配送方式</a></li>
            <li><a href="">服务声明</a></li>
            <li><a href="">广告声明</a></li>
        </ul>
    </div>
    <div align="center" style="text-align: center; margin-top: 10px; margin-bottom: 20px">
        Copyright &copy; ©2005-2016 传智商城 版权所有
    </div>
</div>
</body>
</html>